<template>
  <div class="earth-box">
    <div
      id="bgearth"
      class="earth-js earth-container earth-ready"
      style="width: 500px; height: 500px; margin: 50px auto 50px"
    >
      <canvas width="350" height="350" style="width: 350px; height: 350px" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropType, ref, Ref, onMounted } from "vue";
// import { useECharts } from "@/hooks/web/useECharts";
import { useECharts } from "@pureadmin/utils";
import "echarts-gl";
import { mapData } from "./data";
import { registerMap } from "echarts";
import earthImage from "@/views/chart/3D/earthopcity.png";
import earthImageSvg from "@/views/chart/3D/earth.svg";
import { earthImg } from "./earthbase64.js";

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
  },
  height: {
    type: String as PropType<string>,
    default: "calc(100vh - 78px)"
  }
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

onMounted(async () => {
  // window.addEventListener("earthjsload", function () {
  new Earth("bgearth", {
    location: {
      lat: 39.904989,
      lng: 116.405285
    },
    zoom: 3,
    light: "none",
    transparent: !0,
    mapSeaColor: "RGBA(36, 46, 53,0.6)",
    mapLandColor: "#2fdbbb",
    mapBorderColor: "#5D5D5D",
    mapBorderWidth: 0.25,
    mapHitTest: !0,
    autoRotate: !0,
    autoRotateSpeed: 3,
    autoRotateDelay: 4e3
  });

  // window.Earth.dispatchLoadEvent()
  // });
});
</script>

<style lang="scss">
.earth-box {
  // height: 100%;
  // width: 100%;
  // position: absolute;
  // top: 0;
  // left: 0;
  // bottom: 0;
  // right: 0;
  // background: black;
  margin: 0 !important;
}
</style>
